<template>
  <a-form-model-item :prop="required ? prop : ''">
    <!-- 预览模式描述 -->
    <span v-if="options.pattern == 2 && options.disabled == true">
      {{ options.explain }}
    </span>

    <!-- v-else-if="options.pattern == 1 || ([2, 3].includes(options.pattern) && options.disabled == false)" -->
    <a-cascader
      v-else-if="options.pattern == 1 || ([2, 3].includes(options.pattern) && options.disabled == false)"
      :value="myValue"
      :options="options.options"
      :placeholder="options.placeholder"
      :allowClear="options.clearable"
      :disabled="options.disabled"
      :showSearch="options.showSearch"
      :changeOnSelect="options.changeOnSelect"
      @change="helpChange"
      @click="helpClick"
      :defaultValue="myValue"
    >
      <a-icon v-if="options.icon" slot="suffixIcon" :type="options.icon" />
    </a-cascader>

    <div
      v-else
      :class="{ formMaringBox: true, beyond_hiding: index == undefined ? false : true }"
      :style="`width: ${options.width}; word-wrap:break-word;`"
    >
      <a-tooltip placement="topLeft">
        <template slot="title">
          <span>{{ defMyValue.join(' / ') }}</span>
        </template>
        <span
          class="copy_text"
          @click="copyClick()"
          @mouseenter="
            () => {
              isCopy = true
            }
          "
          @mouseleave="
            () => {
              isCopy = false
            }
          "
        >
          {{ defMyValue.join(' / ') }}
        </span>
      </a-tooltip>
    </div>
  </a-form-model-item>
</template>
<script>
import { quyeryTreeData } from '../../api/base/ha_depart.js'
import { queryMgrCate, queryIncourt } from '@/utils/apply_config/cascadeCustom.js'
import { copyValue } from '@/utils/formassembly/util.js'
export default {
  data() {
    return {
      departId: 0, // 树根节点
      myValue: this.value ? String(this.value).split(',') : [],
      defMyValue: [],
      isCopy: false, // 复制标签显示
    }
  },
  props: {
    label: {
      type: String,
    },
    span: {
      type: Number,
      default: 24,
    },
    prop: {
      type: String,
    },
    // 默认表格样式
    type: {
      type: String,
      default: 'table',
    },
    // 子表单用到
    index: {
      type: Number,
    },
    value: {
      type: String,
    },
    required: {
      type: Boolean,
      default: false,
    },
    // 属性配置参数
    options: {
      type: Object,
      default() {
        return {}
      },
    },
    // 布局配置参数
    config: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  created() {
    console.log('级联控件', this.myValue, this.value)
    // 如果是动态数据特殊处理
    if (this.options.dynamicKey) {
      this.dynamicData(this.options.dynamicKey)
    }
  },
  watch: {
    value(val) {
      // 地址控件, 禁用状态查名称
      if (this.options.disabled && val.length > 0) {
        this.options.options.forEach((v) => {
          this.recursionGetName(v, val)
        })
      }
    },
  },
  methods: {
    // 鼠标点击复制内容
    copyClick() {
      if (copyValue(this.defMyValue.join(' / '))) {
        this.$message.success('复制成功')
      } else {
        this.$message.error('复制失败')
      }
    },
    async dynamicData(key) {
      // 地址控件, 禁用状态查名称
      if (this.myValue.length > 0 && ['ad', 'ad4', 'ad4jx'].includes(key)) {
        this.options.options = this.$store.state.form.formData.dynamicDataList[key]
      } else if (key == 'mantype') {
        this.options.options = await queryMgrCate()
      } else if (key == 'std_incourt') {
        this.options.options = await queryIncourt()
      }
      if(this.value) {
        this.getDefValue(this.options.options, this.myValue)
      }
    },
    // 查找默认值 (id+name)
    getDefValue(treeData, valueArr) {
      treeData.map((v) => {
        if (valueArr.includes(v.id)) {
          this.defMyValue.push(v.name)
        }
        if (v.children && v.children.length > 0) {
          this.getDefValue(v.children, valueArr)
        }
      })
    },
    helpChange(value) {
      console.log('prop', this.prop, value)
      this.myValue = value
      this.$listeners.updatedValueF(this.prop, value.join(','), this.index)
      if (this.options.change) {
        this.$listeners.fHelp(this.options.change, this.index)
      }
    },
    helpClick() {
      if (this.options.click) {
        this.$listeners.fHelp(this.options.click, this.index)
      }
    },
    // 查询树下拉的数据
    async findTreeData(type) {
      await quyeryTreeData({ parent: this.departId, type: type }).then((res) => {
        console.log('树数据', res)
        let tempArr = []
        if (res.code == 0) {
          res.data &&
            res.data.forEach((v) => {
              this.treeRecursion(tempArr, v)
            })
          this.options.options = tempArr
        }
      })
    },
    treeRecursion(arr = [], node) {
      const value =
        node.id.indexOf('dept_id') > -1
          ? node.id.substr(node.id.indexOf('dept_id') + 7)
          : node.id.substr(node.id.indexOf('_') + 1)
      const label = node.name.substring(node.name.indexOf('_') + 1, node.name.length)
      // 找默认值
      if (this.myValue.includes(value)) {
        this.defMyValue.push(label)
      }
      if (node.children) {
        let item = {
          value: value,
          label: label,
          children: [],
        }
        node.children.forEach((sonNose) => {
          this.treeRecursion(item.children, sonNose)
        })
        arr.push(item)
      } else {
        arr.push({
          value: value,
          label: label,
        })
      }
    },
  },
}
</script>
